<template>
    <div>


      <!--导航栏-->
      <div class="a2">
        <div class="a7">
          <div class="a3">
            <div class="a4"><img src="../../assets/a1.png" height="30" width="110" class="aa"/></div>
            <div class="a5">
              <button class="a5a">
                <router-link :to="'Home'">首页</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyActive'">我的活动</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyTribe'">我的部落</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyInfo'">个人信息</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'SecondClass'">第二课堂成绩单</router-link>
              </button>
              <button class="a5a">APP下载</button>
            </div>
            <div class="a6">
              <div style="width: 300px"></div>
              <div class="a6a"></div>
              <div class="a6a"></div>
              <div class="a6aa"></div>
            </div>
          </div>
        </div>
      </div>

<!--活动信息-->
      <div class="z1">
        <div class="z2">
          <div class="z6">
          <div class="z4">
            <div><img :src="activity.photopath" height="239" width="319"/></div>
            <div></div>
          </div>
          <div class="z5">
            <div style="font-size: 17px;font-weight: bolder">{{activity.name}} </div>
            <div>活动时间 ：{{activity.upBeginTime}} ~ {{activity.ingEndTime}}</div>
            <div>类型 ：{{activity.activityType.name}}</div>
            <div>负责人 ：admin1</div>
            <div>面向群体：{{activity.tribe.name}}</div>
            <button style="border-radius: 25px;background: orange;width: 80px;height: 40px;color: white;cursor: pointer" @click="applySign">立即报名</button>
          </div>
          </div>
        </div>

        <div class="z3">
<div class="z9">
          <div class="z7">活动介绍</div>
          <div class="z8"></div>

  <div style="margin-top: 20px">具体规则</div>
<div class="x1">
<div style="margin-top: 10px">报名时间：{{activity.upBeginTime}} ~ {{activity.upEndTime}}</div>
<div style="margin-top: 10px">进行时间：{{activity.ingBeginTime}} ~ {{activity.ingEndTime}}</div>
<div style="margin-top: 10px">报名方式： 报名制</div>
<div style="margin-top: 10px">报名人数： {{activity.upMaxNum}}</div>
</div>

  <div style="margin-top: 20px">负责人</div>
  <div class="x1">
    <div style="margin-top: 10px">姓名：admin1</div>
    <div style="margin-top: 10px">联系方式：123456</div>
  </div>

  <div style="margin-top: 20px">活动介绍</div>
  <div class="x1">
    <div style="margin-top: 10px">活动简介：{{activity.detail}}</div>
  </div>

  <div style="margin-top: 20px">参与须知</div>
  <div class="x1">
    <div style="margin-top: 10px">活动相关信息及参与需求 报名制: 报名先到先得，报名人数达到预设的最大参与人数,则无法继续报名。报名成功者即可参与</div>
  </div>

  <div style="margin-top: 20px">学分设置</div>
  <div class="x1">
    <div style="margin-top: 10px">学分：{{activity.score}}</div>
  </div>


  <div>
    <div style="margin-top: 20px">花絮</div>
    <div style="display: flex;" v-if="this.state==2">
      <div style="margin-top: 10px"><input type="text" v-model="text"></div>
      <div style="margin-top: 10px;margin-left: 30px"><button style="border: 1px solid gray;cursor: pointer" @click="sub">发布</button></div>
    </div>
  </div>
  <div style="margin: 20px 0">
    <div style=" font-weight: 700; font-size: 16px; padding: 15px 30px; border-bottom: 1px solid #eeeeee">花絮列表</div>
    <div style="margin:20px 0;text-align:left;">
      <div style="padding:10px 0; " v-for="item in flowerList" :key="item.id">
        <div style="display:flex;">
          <div style="width: 80px"><el-avatar :size="50" :src="item.user.photopath" ></el-avatar></div>
          <div style="flex: 1">
            <div>{{item.user.name}}<span style="margin-left: 10px">{{item.time}}</span></div>
            <div style="margin-top: 10px;color: #666">{{item.text}}</div>
          </div>
        </div>
        <div style="border-bottom: 1px solid black;margin: auto;margin-top:20px;width: 1160px"></div>
      </div>
    </div>
  </div>
</div>
        </div>
      </div>





      <!--页尾-->
      <div class="c1">
        <div class="c2">
          <div class="c3">
            <div>到梦简介</div>
            <div>到梦协议</div>
            <div>到梦服务</div>
            <div>第二课堂全国活动查询</div>
            <div>第二课堂全国活动证书查询</div>
            <div>校企共建</div>
            <div>问题与帮助</div>
            <div>联系我们</div>
            <div>APP使用说明</div>
            <div>盗梦空间使用章程和制度</div>
          </div>
          <div class="c4"></div>
          <div class="c5">
            <div>京公网安备11010802024175 到梦空间系统</div>
            <div>2016-2021 Copyright©全国共青团研究中心</div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
import {exit} from "shelljs";
import {id} from "html-webpack-plugin/lib/chunksorter";

export default {
  name: "TribalDetails",
  data() {
    return {
      id:'',
      user:{},
      activity:{},
      state:'',
      text:'',
      flowerList:[]



    };
  },
  methods: {
    getActivityDetail(id) {
      this.$axios.post('/activity/getDetail?id=' + id).then(resp => {
        this.activity = resp.data
      })
    },
    applySign() {
        this.$axios.post('/userActivity/applySign?uid='+this.user.id+"&aid="+this.activity.id).then(resp=>{
          if (resp.data.code==200){
            this.$message.success('申请成功')
          }else{
            this.$message.error(resp.data.message)
          }
        })




    },
    sub(){
      this.$axios.post('activityFlower/sub?text='+this.text+"&uid="+this.user.id+"&aid="+this.id).then(resp=>{
        if (resp.data.code==200){
          this.$message.success("发布成功")
          this.refreshPage()
        }else{
          this.$message.error("发布失败")
        }
      })
    },
    getFlower(){
      this.$axios.post('/activityFlower/getFlowerList?uid='+this.user.id+"&aid="+this.id).then(resp=>{
        this.flowerList=resp.data
      })
    },
    refreshPage() {
      // 执行完操作后调用location.reload()方法刷新页面
      location.reload();
    },


  },
  created() {
    this.user = JSON.parse(sessionStorage.getItem("user1"))
    this.id = this.$route.query.id;
    this.state=this.$route.query.state
    console.log("this.sid", this.sid)
    console.log("this.id", this.id)
    this.$nextTick(() => {
      this.getActivityDetail(this.id);
      this.getFlower()
    });
  }
}


</script>

<style scoped>
  a{
    color: black;
    text-decoration: none;
  }
  button{
    border: none;
    background-color: transparent;
    box-shadow: none;
  }
  .a2{
    position: relative;
  }
  .a7{
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 2;
    background:#FFFFFF ;
    box-shadow: 0px 5px 10px 0 #E2E2E2;
  }
  .a3{
    display: flex;
    width: 1210px;
    height: 50px;
    margin: auto;
  }
  .a4{
    width: 100px;
    height: 55px;
    display: grid;

    align-items: center;
    cursor: pointer;
  }
  .a5{
    flex: 1;
    font-size: 13px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .a5a:hover{
    cursor: pointer;
    color: gold;
  }
  .a5a>a:hover{
    cursor: pointer;
    color: gold;
  }
  .a6{
    font-size: 13px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .a6a:hover{
    cursor: pointer;
  }
  .a6aa:hover{
    cursor: pointer;
    color: darkgray;
  }
  .c1{
    background: #D6D8DA;
    margin-top: 2500px;
    width: 100%;
    height: 100px;
    position: absolute;
  }
  .c2{
    width: 1210px;
    margin: auto;
  }
  .c3{
    height: 40px;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    align-items: center;
    color: black;
    cursor: pointer;
  }
  .c4{
    border-bottom: 1px solid darkgray;
    margin-top: 10px;
  }
  .c5{
    width: 700px;
    margin: auto;
    margin-top: 20px;
    display: flex;
    font-size: 13px;
    justify-content: space-evenly;
    color: black;
  }

  .z1{
    position: absolute;
    background: #F4F4F4;
    width: 100%;
    height: 2500px;
  }
  .z2{
    background:#FFFFFF;
    height: 380px;
    width: 1210px;
    margin: auto;
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .z6{
    width: 1150px;
    height: 340px;
    display: flex;
    justify-content: space-between;
  }
  .z4{
    width: 320px;
  }
  .z5{
    width: 780px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .z3{
    background: white;
    height: 2000px;
    width: 1210px;
    margin: auto;
    margin-top: 20px;
  }
  .z9{
    width: 1150px;
    margin: auto;
    margin-top: 20px;
    font-size: 13px;
  }
  .z7{
    color: orange;
    padding-top: 15px;
    height: 35px;
    width: 52px;
    border-bottom: 1px solid orange;
  }
  .z8{
    border-bottom: 1px solid gainsboro;
  }
  .x1{
    padding-left: 20px;
    padding-bottom: 10px;
    margin-top: 20px;
    border: 1px solid gainsboro;
  }

</style>
